40. Introduction to web workers.

1. How do you check Web Workers browser support?

You can check if the browser supports Web Workers by checking if the Worker object is available in the window object.

Example:

javascript
CopyEdit
if (typeof Worker !== 'undefined') {
    console.log('Web Workers are supported.');
} else {
    console.log('Web Workers are not supported.');
}

• If the Worker object exists, it means the browser supports Web Workers.
• If it returns undefined, the browser does not support Web Workers.

2. Give an example of a Web Worker

A Web Worker allows you to run JavaScript in the background without blocking the main thread (UI).

Example:

1. Create a new file called worker.js:

javascript
CopyEdit
// worker.js
self.onmessage = function(event) {
    const result = event.data * 2;
    postMessage(result);
};

2. Use the Web Worker in your main JavaScript file:

javascript
CopyEdit
// main.js
if (typeof Worker !== 'undefined') {
    const worker = new Worker('worker.js');

    worker.postMessage(5); // Send data to the worker

    worker.onmessage = function(event) {
        console.log('Result from worker:', event.data); // Output: 10
    };

    worker.onerror = function(error) {
        console.error('Worker error:', error);
    };
}

Explanation:

• postMessage() sends data to the worker.
• onmessage receives the result from the worker.
• The worker runs independently of the main thread.

3. What are the restrictions of Web Workers on the DOM?

Web Workers cannot access or modify the DOM directly. This is because they run in a separate thread, isolated from the main thread where the DOM is manipulated.

Example:

❌ Not Allowed: Attempting to modify the DOM from a Web Worker:

javascript
CopyEdit
// worker.js
self.onmessage = function(event) {
    // This will throw an error because workers can't access the DOM
    document.getElementById('output').innerText = 'Hello from worker';
};

✅ Correct Way: Use postMessage to send the data to the main thread, which can then update the DOM:

javascript
CopyEdit
// worker.js
self.onmessage = function(event) {
    const result = event.data * 2;
    postMessage(result); // Send data to the main thread
};

// main.js
worker.onmessage = function(event) {
    document.getElementById('output').innerText = `Result: ${event.data}`;
};

Key Restrictions:

• Cannot access document, window, or parent.
• Cannot use alert boxes (alert()).
• Cannot directly interact with the DOM (use postMessage() to communicate with the main thread).

Web Workers are designed for offloading heavy computations to keep the main thread responsive.